<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        chart: null,
        dataArr: [{
          value: 100,
          name: '压力(Pa)'
        }],
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: '#5CF9FE' // 0% 处的颜色
        },
        {
          offset: 0.17,
          color: '#468EFD' // 100% 处的颜色
        },
        {
          offset: 0.9,
          color: '#468EFD' // 100% 处的颜色
        },
        {
          offset: 1,
          color: '#5CF9FE' // 100% 处的颜色
        }
        ]),
        colorSet: [],
        rich: {
          white: {
            fontSize: 40,
            color: '#fff',
            fontWeight: '500',
            padding: [-100, 0, 0, 0]
          },
          bule: {
            fontSize: 30,
            fontFamily: 'DINBold',
            color: '#fff',
            fontWeight: '700',
            padding: [-100, 0, 0, 0]
          },
          radius: {
            width: 350,
            height: 80,
            // lineHeight:80,
            borderWidth: 1,
            borderColor: '#0092F2',
            fontSize: 50,
            color: '#fff',
            backgroundColor: '#1B215B',
            borderRadius: 20,
            textAlign: 'center'
          },
          size: {
            height: 400,
            padding: [100, 0, 0, 0]
          }
        }

      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        console.log('ssss')
        this.colorSet = [[1, this.color]]
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption({
          backgroundColor: '#101E44',
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },

          series: [
            {
              type: 'gauge',
              name: '外层辅助',
              radius: '74%',
              startAngle: '225',
              endAngle: '-45',
              splitNumber: '120',
              pointer: {
                show: false
              },
              detail: {
                show: false
              },
              data: [{
                value: 1
              }],
              // data: [{value: 1, name: 90}],
              title: {
                show: true,
                offsetCenter: [0, 30],
                textStyle: {
                  color: '#fff',
                  fontStyle: 'normal',
                  fontWeight: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 20
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: [
                    [1, '#00FFFF']
                  ],
                  width: 2,
                  opacity: 1
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                length: 20,
                lineStyle: {
                  color: '#051932',
                  width: 0,
                  type: 'solid'
                }
              },
              axisLabel: {
                show: false
              }
            },
            {
              type: 'gauge',
              radius: '70%',
              startAngle: '225',
              endAngle: '-45',
              min: 0,
              max: 120,
              pointer: {
                show: true
              },
              detail: {
                formatter: function(value) {
                  return '{white|' + value + '}{bule|}' + '{size|' + '}'
                },
                rich: this.rich,
                'offsetCenter': ['0%', '55%']
              },
              data: this.dataArr,
              title: {
                show: true,
                offsetCenter: [0, 40],
                textStyle: {
                  color: '#fff',
                  fontStyle: 'normal',
                  fontWeight: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 30
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: this.colorSet,
                  width: 15,
                  // shadowBlur: 15,
                  // shadowColor: '#B0C4DE',
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  opacity: 1
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
                length: 25,
                lineStyle: {
                  color: '#00377a',
                  width: 2,
                  type: 'solid'
                }
              },
              axisLabel: {
                show: false
              },
              animationDuration: 4000
            },
            {
              name: '灰色内圈', // 刻度背景
              type: 'gauge',
              z: 2,
              radius: '60%',
              startAngle: '225',
              endAngle: '-45',
              // center: ["50%", "75%"], //整体的位置设置
              axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                  color: [
                    [1, '#018DFF']
                  ],
                  fontSize: 20,
                  width: 2,
                  opacity: 1 // 刻度背景宽度
                }
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              pointer: {
                show: false
              },
              axisTick: {
                show: false
              },
              detail: {
                show: 0
              }
            },
            {
              name: '白色圈刻度',
              type: 'gauge',
              radius: '60%',
              startAngle: 225, // 刻度起始
              endAngle: -45, // 刻度结束
              min: 0,
              max: 120,
              splitNumber: 6,
              z: 4,
              axisTick: {
                show: false
              },
              splitLine: {
                length: 16, // 刻度节点线长度
                lineStyle: {
                  width: 2,
                  color: '#018DFF'
                } // 刻度节点线
              },
              axisLabel: {
                color: 'rgba(255,255,255,8)',
                fontSize: 24
              }, // 刻度节点文字颜色
              pointer: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  opacity: 0
                }
              },
              detail: {
                show: false
              },
              data: [{
                value: 0,
                name: ''
              }]
            },
            { // 内圆
              type: 'pie',
              radius: '40%',
              center: ['50%', '50%'],
              z: 1,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [{
                    offset: 0,
                    color: '#4978EC'
                  },
                  {
                    offset: 0.5,
                    color: '#1E2B57'
                  },
                  {
                    offset: 1,
                    color: '#141F3D'
                  }
                  ], false),
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  }
                }
              },
              hoverAnimation: false,
              label: {
                show: false
              },
              tooltip: {
                show: false
              },
              data: [100],
              animationType: 'scale'
            },
            { // 外圆
              type: 'pie',
              radius: '85%',
              center: ['50%', '50%'],
              z: 0,
              itemStyle: {
                color: '#141C33'
              },
              hoverAnimation: false,
              label: {
                show: false
              },
              tooltip: {
                show: false
              },
              data: [120],
              animationType: 'scale'
            }
          ]
        })
      }
    }
  }
</script>
